<template>
  <el-form ref="refForm" :model="formData" label-position="top">
    <el-form-item label="格式化类型">
      <el-select
        v-model="formData.formatType"
        placeholder="格式化类型"
        style="width: 100%"
        @change="(val) => handelChange(val, 'formatType')"
      >
        <el-option
          :value="i.type"
          :label="i.label"
          v-for="(i, index) in formatList"
          :key="index"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="自定义"
      v-if="formData.formatType === 'custom'"
      prop="formatReg"
    >
      <LabelExpression
        @change="handelChange"
        style="width: 100%"
        v-model="formData.formatReg"
        :fields="fieldList"
        :symbols="symbols"
      />
    </el-form-item>
  </el-form>
</template>
<script>
import { cloneDeep } from "lodash"
import LabelExpression from "@/components/LabelExpression"
export default {
  name: "DateConfig",
  components: {
    LabelExpression,
  },
  data() {
    return {
      modelData: {},
      formData: {},
      formatList: [
        {
          format: "yyyy",
          type: "year",
          label: "年",
        },
        {
          format: "yyyy-MM",
          type: "month",
          label: "年-月",
        },

        {
          format: "yyyy-MM-dd",
          label: "年-月-日",
          type: "date",
        },
        {
          format: "yyyy-MM-dd HH:mm",
          type: "datetime",
          label: "年-月-日 时:分",
        },
        {
          format: "yyyy-MM-dd HH:mm:ss",
          type: "datetimeSeconds",
          label: "年-月-日 时:分:秒",
        },
        {
          format: "",
          type: "custom",
          label: "自定义",
        },
      ],
      fieldList: [
        {
          label: "年",
          value: "yyyy",
        },
        {
          label: "年",
          value: "yy",
        },
        {
          label: "月",
          value: "MM",
        },
        {
          label: "月",
          value: "M",
        },
        {
          label: "日",
          value: "dd",
        },
        {
          label: "日",
          value: "d",
        },
        {
          label: "时",
          value: "HH",
        },
        {
          label: "时",
          value: "H",
        },
        {
          label: "分",
          value: "mm",
        },
        {
          label: "分",
          value: "m",
        },
        {
          label: "秒",
          value: "ss",
        },
        {
          label: "秒",
          value: "s",
        },
        {
          label: "毫秒",
          value: "SSS",
        },
        {
          label: "毫秒",
          value: "SS",
        },
        {
          label: "毫秒",
          value: "S",
        },
      ],
      symbols: ["-", "/", "_", "[", "]"],
    }
  },
  methods: {
    init(data) {
      this.formData = {}
      this.modelData = cloneDeep(data)
      this.$set(this.formData, "formatType", data.formatType)
      this.$set(this.formData, "formatReg", data.formatReg)
    },

    handelChange(val, isFormatType) {
      if (isFormatType === "formatType") {
        const formatItem = this.formatList.find((i) => i.type === val)
        this.$set(this.formData, "formatReg", formatItem.format)
      }
      this.$emit("changeData", {
        formatType: this.formData.formatType,
        formatReg: this.formData.formatReg,
        type: 4,
      })
    },
  },
}
</script>
